<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="renderer" content="webkit">
    <title>文字与字体相关样式</title>
    <style type="text/css">
        p.title {
            color: #01B4EE;
            font-size: 18px;
        }
        .text_shaow {
            text-shadow: 5px 5px 3px #01B4EE;
            font-size: 50px;

        }
        .word_break>span:first-child {
            word-break:normal;
        }
        .word_break>span:nth-child(3) {
            word-break:keep-all;
            color: #ee93de;
        }
        .word_break>span:last-child {
            word-break:break-all;
            color: #01B4EE;
        }
    </style>
</head>
<body>
    <h4>文字与字体相关样式</h4>
    <p class="title">text-shadow:给页面上的文字添加阴影效果：格式：text-shadow:length lenght length color</p>
    <p>解释：前面三个length分别是阴影离开文字的横方向距离，纵方向距离，阴影的模糊半径(为可选参数)，color指阴影的颜色(为可选参数，可以放在最前也可放在最后)</p>
    <div class="text_shaow">
        text-shadow
    </div>
    <p class="title">word-break:让文字自动换行，格式：word-break:值</p>
    <p>可使用的值：normal使用浏览器默认换行规则<br/>keep-all只有在半角空格或连字符处换行<br/>break-all允许在单词内换行</p>
    <div class="word_break">
        <span>normal使用浏览器默认换行规则,省略文字，若干...........................</span><br/>
        <span>keep-all只有在半角空格或连字符处换行,这里省略文字，若干...........................</span><br/>
        <span>break-all允许在单词内换行,Omit the word,a number of...........................</span>
    </div>
</body>
</html>